<script setup lang="ts">
import { useSettingStore } from "@/store/setting-store.ts";
import { SettingOutlined } from "@ant-design/icons-vue";
import Grid from "@/components/framework/grid.vue";
import PageSiderMenu from "@/pages/main/layout/page-sider-menu.vue";
import type { PageSiderMenuItem } from "@/pages/main/config/types.ts";
import { computed, provide, ref } from "vue";
import ToggleView from "@/components/framework/toggle-view.vue";
import ToggleItem from "@/components/framework/toggle-item.vue";
import { hc } from "@/framework/vue/util/render.ts";
import DialogWindow from "@/components/framework/dialog-window.vue";
import type { SettingsContext, SettingsSectionContext } from "@/components/settings/types.ts";

const settings = useSettingStore();

const menuItems: PageSiderMenuItem[] = [
  {
    key: "appearance",
    name: "外观",
    component: () => import("./appearance-settings.vue"),
  },
  {
    key: "dev-env",
    name: "软件环境",
    component: () => import("./dev-env-settings.vue"),
  },
  {
    key: "local-project",
    name: "项目管理",
    component: () => import("./local-project-settings.vue"),
  },
  {
    key: "network",
    name: "网络设置",
    component: () => import("./network-settings.vue"),
  },
];
const toggleViews = computed(() => menuItems.filter(it => !!it.component));

const activeKey = ref(menuItems[0].key);

const sections = new Map<string, SettingsSectionContext>();

const context: SettingsContext = {
  registerSection(id: string, section) {
    sections.set(id, section);
  },
  unregisterSection(id) {
    sections.delete(id);
  },
};
provide("settings.context", context);

const validate = async () => {
  const keys = [...sections.keys()];
  for (const key of keys) {
    const it = sections.get(key);
    if (!it) continue;
    const next = await it.validate();
    if (!next) {
      activeKey.value = key; // 跳到异常页
      return false;
    }
  }

  return true;
};

const apply = async () => {
  sections.forEach(it => it.save());
};

const save = async () => {
  await apply();
  settings.modalOpen = false;
};
</script>

<template>
  <dialog-window title="设置" width="1000px" v-model:open="settings.modalOpen" :icon="hc(SettingOutlined, { spin: true })" :before-ok="validate">
    <grid cols-preset="two-cols-0" class="mb-10 border-top border-bottom" style="height: 500px">
      <div class="p-5 border-right">
        <page-sider-menu v-model:active-key="activeKey" :menus="menuItems" width="200px" />
      </div>
      <a-layout-content class="pl-10 pt-10">
        <toggle-view v-model:active-key="activeKey">
          <toggle-item v-for="it in toggleViews" :key="it.key" :component="it.component!" :item-id="it.key" />
        </toggle-view>
      </a-layout-content>
    </grid>

    <template #footer>
      <a-space>
        <a-button @click="settings.modalOpen = false">取消</a-button>
        <a-button @click="save">确定</a-button>
        <a-button @click="apply">应用</a-button>
      </a-space>
    </template>
  </dialog-window>
</template>

<style lang="less"></style>
